<template>
  <!-- 页面容器 -->
  <div class="page-container">
    <!-- 顶部标题栏 -->
    <header class="header">发现</header>

    <!-- 页面主要内容区域 -->
    <div class="pb-20">
      <!-- 搜索栏区域 -->
      <div class="bg-white p-4 mb-6">
        <div class="bg-gray-100 rounded-lg px-4 py-3 flex items-center space-x-3">
          <i class="fas fa-search text-gray-400"></i>
          <span class="text-gray-500">发现更多美食和优惠</span>
        </div>
      </div>

      <!-- 快捷入口区域 -->
      <div class="bg-white mx-4 rounded-lg p-4 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">快捷入口</h3>
        <!-- 使用网格布局展示4个快捷入口 -->
        <div class="grid grid-cols-4 gap-4">
          <div
              v-for="action in quickActions"
              :key="action.id"
              @click="handleQuickAction(action.type)"
              class="flex flex-col items-center space-y-2 cursor-pointer hover:bg-gray-50 p-3 rounded-lg transition-colors"
          >
            <!-- 圆形图标按钮 -->
            <div
                class="w-12 h-12 rounded-full flex items-center justify-center text-white text-lg"
                :style="{ backgroundColor: action.color }"
            >
              <i :class="action.icon"></i>
            </div>
            <!-- 入口名称 -->
            <span class="text-xs text-gray-700 text-center">{{ action.name }}</span>
          </div>
        </div>
      </div>

      <!-- 限时优惠区域 -->
      <div class="px-4 mb-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-semibold text-gray-800">限时优惠</h3>
          <button class="text-primary-500 text-sm">查看更多 ></button>
        </div>

        <!-- 使用2列网格布局展示优惠商品 -->
        <div class="grid grid-cols-2 gap-4">
          <div
              v-for="deal in hotDeals"
              :key="deal.id"
              @click="goToBusiness(deal.businessId)"
              class="bg-white rounded-lg overflow-hidden shadow-sm cursor-pointer hover:shadow-md transition-shadow"
          >
            <!-- 商品图片 - 使用固定高度确保图片显示完整 -->
            <img
                :src="deal.image"
                :alt="deal.title"
                class="w-full h-24 object-cover"
            >
            <!-- 商品信息区域 -->
            <div class="p-3">
              <h4 class="font-semibold text-gray-800 text-sm mb-1">{{ deal.title }}</h4>
              <p class="text-xs text-gray-600 mb-2">{{ deal.description }}</p>
              <!-- 价格信息 -->
              <div class="flex items-center justify-between">
                <span class="text-red-500 font-bold text-sm">¥{{ deal.price }}</span>
                <span class="text-xs text-gray-500 line-through">¥{{ deal.originalPrice }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 推荐商家区域 -->
      <div class="px-4 mb-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-lg font-semibold text-gray-800">为你推荐</h3>
          <button class="text-primary-500 text-sm">换一批</button>
        </div>

        <!-- 商家列表 -->
        <div class="space-y-4">
          <div
              v-for="restaurant in recommendedRestaurants"
              :key="restaurant.id"
              @click="goToBusiness(restaurant.id)"
              class="bg-white rounded-lg p-4 cursor-pointer hover:shadow-md transition-shadow"
          >
            <!-- 商家信息展示 - 使用flex布局 -->
            <div class="flex space-x-4">
              <!-- 商家logo图片 -->
              <img
                  :src="restaurant.image"
                  :alt="restaurant.name"
                  class="w-20 h-20 rounded-lg object-cover"
              >
              <div class="flex-1">
                <!-- 商家名称和评分 -->
                <div class="flex items-center justify-between mb-2">
                  <h4 class="font-semibold text-gray-800">{{ restaurant.name }}</h4>
                  <div class="flex items-center space-x-1">
                    <i class="fas fa-star text-yellow-400 text-xs"></i>
                    <span class="text-xs text-gray-600">{{ restaurant.rating }}</span>
                  </div>
                </div>

                <!-- 商家分类 -->
                <p class="text-sm text-gray-600 mb-2">{{ restaurant.category }}</p>

                <!-- 配送信息 -->
                <div class="flex items-center justify-between text-xs text-gray-500">
                  <span>¥{{ restaurant.minOrder }}起送 | ¥{{ restaurant.deliveryFee }}配送</span>
                  <span>{{ restaurant.distance }}km</span>
                </div>

                <!-- 促销标签 -->
                <div v-if="restaurant.promotion" class="mt-2">
                  <span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded">
                    {{ restaurant.promotion }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 活动专区 -->
      <div class="px-4 mb-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">精彩活动</h3>
        <div class="space-y-4">
          <div
              v-for="activity in activities"
              :key="activity.id"
              class="bg-gradient-to-r rounded-lg p-4 text-white cursor-pointer hover:shadow-lg transition-shadow"
              :style="{ backgroundImage: `linear-gradient(135deg, ${activity.gradientFrom}, ${activity.gradientTo})` }"
          >
            <!-- 活动内容 -->
            <div class="flex items-center justify-between">
              <div>
                <h4 class="font-bold text-lg mb-1">{{ activity.title }}</h4>
                <p class="text-sm opacity-90">{{ activity.description }}</p>
              </div>
              <!-- 活动按钮 -->
              <button class="bg-white bg-opacity-20 px-4 py-2 rounded-lg text-sm font-medium">
                {{ activity.buttonText }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <FooterNav />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import FooterNav from './FooterNav.vue'

// 导入本地图片资源
import deal1 from '@/assets/sj/sj03.png'
import deal2 from '@/assets/sj/sj01.png'
import deal3 from '@/assets/sj/sj06.png'
import deal4 from '@/assets/sj/sj05.png'
import rest1 from '@/assets/sj/sj01.png'
import rest2 from '@/assets/sj/sj04.png'
import rest3 from '@/assets/sj/sj06.png'

const router = useRouter()

// 快捷入口数据
const quickActions = ref([
  { id: 1, name: '超值套餐', icon: 'fas fa-utensils', color: '#f97316', type: 'combo' },
  { id: 2, name: '限时抢购', icon: 'fas fa-clock', color: '#ef4444', type: 'flash' },
  { id: 3, name: '品牌优选', icon: 'fas fa-crown', color: '#8b5cf6', type: 'brand' },
  { id: 4, name: '新店特惠', icon: 'fas fa-store', color: '#06b6d4', type: 'new' }
])

// 限时优惠数据
const hotDeals = ref([
  {
    id: 1,
    title: '麦当劳超值套餐',
    description: '汉堡+薯条+可乐',
    price: 19.9,
    originalPrice: 35,
    image: deal1,
    businessId: 3
  },
  {
    id: 2,
    title: '饺子特价组合',
    description: '任选两种口味',
    price: 25,
    originalPrice: 32,
    image: deal2,
    businessId: 1
  },
  {
    id: 3,
    title: '鲜果茶买一送一',
    description: '限时优惠活动',
    price: 15,
    originalPrice: 30,
    image: deal3,
    businessId: 6
  },
  {
    id: 4,
    title: '排骨米饭套餐',
    description: '营养搭配更健康',
    price: 22,
    originalPrice: 28,
    image: deal4,
    businessId: 5
  }
])

// 推荐商家数据
const recommendedRestaurants = ref([
  {
    id: 1,
    name: '万家饺子（软件园E18店）',
    category: '各种饺子炒菜',
    rating: 4.9,
    minOrder: 15,
    deliveryFee: 3,
    distance: 3.22,
    image: rest1,
    promotion: '新用户立减9元'
  },
  {
    id: 4,
    name: '米村拌饭（浑南店）',
    category: '各种炒菜拌饭',
    rating: 4.6,
    minOrder: 15,
    deliveryFee: 3,
    distance: 2.8,
    image: rest2,
    promotion: '特惠拌饭19.9元'
  },
  {
    id: 7,
    name: '茶兮鲜果饮品（国际软件园店）',
    category: '甜品饮品',
    rating: 4.9,
    minOrder: 15,
    deliveryFee: 3,
    distance: 0.8,
    image: rest3,
    promotion: '买一送一'
  }
])

// 活动数据
const activities = ref([
  {
    id: 1,
    title: '会员专享日',
    description: '开通会员享更多优惠',
    buttonText: '立即开通',
    gradientFrom: '#f97316',
    gradientTo: '#ea580c'
  },
  {
    id: 2,
    title: '邀请好友',
    description: '邀请好友注册送红包',
    buttonText: '立即邀请',
    gradientFrom: '#8b5cf6',
    gradientTo: '#7c3aed'
  }
])

/**
 * 处理快捷入口点击事件
 * @param type 入口类型
 */
const handleQuickAction = (type: string) => {
  switch (type) {
    case 'combo':
    case 'flash':
    case 'brand':
    case 'new':
      router.push('/business-list')
      break
  }
}

/**
 * 跳转到商家详情页
 * @param id 商家ID
 */
const goToBusiness = (id: number) => {
  router.push(`/business/${id}`)
}
</script>